<template>
  <div class="menu">
    <el-row class="tac">
      <el-col>
        <el-menu
          :default-active="defaultMenu"
          class="el-menu-vertical-demo"
          :router="true"
          background-color="#fff"
          text-color="#545c64"
          active-text-color="#ffd04b"
          
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>组件列表</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="home">首页</el-menu-item>
              <el-menu-item
                v-for="item in menuList"
                :key="item.index"
                :index="item.index"
                >{{ item.title }}</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "VpMenu",
  data() {
    return {
      // defaultMenu: "home",
      // path: "/", //路由
      menuList: [
        { index: "dragdemo", title: "拖曳" },
        { index: "map", title: "地图" },
        { index: "zqzb", title: "杂七杂八" },
      ],
    };
  },
  mounted() {
    // window.location.href = "";
  },
  computed: {
    defaultMenu() {
      let index = ''+this.$route.path
      return index.replace('/','');
    },
  },
  methods: {
  },
};
</script>
<style scoped>
.menu {
  width: 240px;
  position: fixed;
  top: 0;
  bottom: 0;
  margin-top: 90px;
  overflow: hidden;
}
.el-menu {
  border-right: 0 !important;
}
</style>